<template>
  <div class="app-container search-list">
    <table-pagination
        ref="el-search-table"
        :fetch="getData"
        type="remote"
        :page-sizes="[20, 50, 100]"
        :columns="columns"
        :form-options="formOptions"
        :adaptive = "fixOption"
        height="100px"
        list-field="records"
        total-field="totalElements"
        page-index-key="page"
        page-size-key="pageSize"
        method="get">
      <template slot="button">
          <el-button type="primary" size="mini" @click="handleAdd()">新增菜单</el-button>
      </template>
      <template slot-scope="scope" slot="img">
        <el-image
            style="width: 80px; height: 60px"
            :src="scope.row.url"
            :preview-src-list="[scope.row.url]"
            fit="contain"></el-image>
      </template>
      <el-table-column label="操作" slot="append">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row.id,scope.row)">修改</el-button>
          <el-button v-if="scope.row.menuType === undefined || scope.row.menuType === 'custom'" plain size="mini"
                     type="danger" @click="handleDel(scope.row.id)">删除</el-button>
          <el-button v-else plain size="mini" disabled="disabled">不可删除</el-button>
        </template>
      </el-table-column>
    </table-pagination>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import { getNavigationList, deleteNavigation } from '@/api/menu-navigation';
import {delAppPrivate} from '@/api/app-market';
export default {
    name: 'menu-list',
    components: {
        TablePagination
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    data () {
        return {
            fixOption: {fixedHeader: true},
            list: null,
            listLoading: true,
            loadingBtn: false,
            pageParams: {
                page: 1,
                pageSize: 20,
                type: ''
            },
            formOptions: {
                showResetBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [
                ]
            },
            columns: [
                {label: '菜单名称', prop: 'name'},
                {label: '菜单一级目录', prop: 'menuNames'}
            ],
            tableData: []
        };
    },
    methods: {
        getData (params) {
            this.pageParams.siteId = this.siteId;
            return new Promise((resolve, reject) => {
                getNavigationList({...this.pageParams, ...params}).then((res) => {
                    resolve(res);
                });
            });
        },
        handleAdd () {
            this.$router.push({name: 'menu-add'});
        },
        handleEdit (id, row) {
            this.$router.push({name: 'menu-edit', params: {id}});
        },
        handleDel (id) {
            this.$confirm('确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteNavigation(this.siteId, id).then(res => {
                    if (res.code === '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$refs['el-search-table'].searchHandler(true);
                    } else {
                        this.$message({type: 'error', message: '删除出错'});
                    }
                });
            }).catch(() => {
            });
        }
    }
};
</script>

<style lang="scss">
.material-btns{
  display: flex;
  align-items: center;
  .ele-upload-image {
    margin-right: 12px;
    .ele-pic-dialog{
      display: none;
    }
  }
}
</style>
